(function () {
  // 步骤1：创建echarts实例
  let myChart = echarts.init(document.querySelector(".echarts3"));

  // 步骤2：定义配置（指定图表的配置项和数据）
  let angle = 0; // 角度，用来做简单的动画效果的
  let value = 23; // 图上角度数据
  let option = {
    title: {
      text: `{a|${value}}{b|%}\n\n{c|会员购买占比}`,
      x: "center",
      y: "center",
      textStyle: {
        rich: {
          a: {
            fontSize: 50,
            color: "#fff",
            fontWeight: "bold",
          },
          b: {
            fontSize: 50,
            color: "#fff",
            fontWeight: "bold",
          },
          c: {
            fontSize: 16,
            color: "#fff",
          },
        },
      },
    },
    series: [
      {
        type: "custom",
        coordinateSystem: "none",
        renderItem: function (params, api) {
          return {
            type: "arc",
            shape: {
              cx: api.getWidth() / 2,
              cy: api.getHeight() / 2,
              r: (Math.min(api.getWidth(), api.getHeight()) / 1.6) * 0.65,
              startAngle: ((0 + -angle) * Math.PI) / 180,
              endAngle: ((360 + -angle) * Math.PI) / 180,
            },
            style: {
              stroke: "#ff6e1b",
              fill: "transparent",
              lineWidth: 1,
            },
            silent: true,
          };
        },
        data: [0],
      },
      {
        type: "pie",
        radius: ["75%", "60%"],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        label: {
          normal: {
            position: "center",
          },
        },
        data: [
          {
            value: value,
            name: "",
            itemStyle: {
              normal: {
                color: {
                  // 完成的圆环的颜色
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgb(255, 128, 0)", // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: "rgba(200, 106, 255, 0.8)", // 100% 处的颜色
                    },
                  ],
                },
              },
            },
          },
          {
            value: 100 - value,
            name: "",
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(237, 119, 55, 0.2)",
              },
            },
          },
        ],
      },
    ],
  };

  // 步骤3：使用刚指定的配置项和数据显示图表
  myChart.setOption(option);

  // 步骤4：监控网页视口
  window.addEventListener("resize", () => {
    myChart.resize();
  });
})();
